<template>
	<view class="Check-in-platform">
		<view class="title">
			基本信息
		</view>
		<view class="content">

			<u-form :model="form" ref="form" :rules="rules">
				<view class="content-row">
					<view class="content-row-left">
						姓名
					</view>
					<view class="content-row-right">
						<u-form-item prop="name">
							<u--input placeholder="请输入" border="none" v-model="form.name"></u--input>
						</u-form-item>
					</view>

				</view>
				<u-line color="#ccc" length="90%"></u-line>
				<view class="content-row">
					<view class="content-row-left">
						性别
					</view>
					<view class="content-row-right" @click="blocKpicker(0)">
						<u-form-item prop="gender">
							<u--input placeholder="请选择" border="none" disabledColor="#fff" :disabled="true"
								suffixIcon="arrow-down" v-model="form.gender"></u--input>
						</u-form-item>
					</view>
				</view>
				<u-line color="#ccc" length="90%"></u-line>
				<view class="content-row">
					<view class="content-row-left">
						类型
					</view>
					<view class="content-row-right" @click="blocKpicker(1)">
						<u-form-item prop="type">
							<u--input placeholder="请选择" border="none" disabledColor="#fff" :disabled="true"
								suffixIcon="arrow-down" v-model="form.type"></u--input>
						</u-form-item>
					</view>
				</view>
				<u-line color="#ccc" length="90%"></u-line>
				<view class="content-row">
					<view class="content-row-left">
						手机号
					</view>
					<view class="content-row-right">
						<u-form-item prop="mobile">
							<u--input placeholder="请输入手机号" border="none" v-model="form.mobile"></u--input>
						</u-form-item>
					</view>

				</view>
				<u-line color="#ccc" length="90%"></u-line>
				<view class="content-row">
					<view class="content-row-left">
						出生日期
					</view>
					<view class="content-row-right" @click="showTime=true">
						<u-form-item prop="time">
							<u--input placeholder="请选择出生日期" border="none" disabledColor="#fff" :disabled="true"
								suffixIcon="arrow-down" v-model="form.time"></u--input>
						</u-form-item>
					</view>

				</view>
				<u-line color="#ccc" length="90%"></u-line>
				<view class="content-row">
					<view class="content-row-left">
						高校
					</view>
					<view class="content-row-right">
						<u-form-item prop="collegesAndUniversities">
							<u--input placeholder="请输入高校" border="none"
								v-model="form.collegesAndUniversities"></u--input>
						</u-form-item>
					</view>

				</view>
				<u-line color="#ccc" length="90%"></u-line>
				<view class="content-row">
					<view class="content-row-left">
						专业
					</view>
					<view class="content-row-right">
						<u-form-item prop="speciality">
							<u--input placeholder="请输入专业" border="none" v-model="form.speciality"></u--input>
						</u-form-item>
					</view>

				</view>
				<u-line color="#ccc" length="90%"></u-line>
				<view class="content-row">
					<view class="content-row-left">
						学历
					</view>
					<view class="content-row-right" @click="blocKpicker(2)">
						<u-form-item prop="education">
							<u--input placeholder="请选择" border="none" disabledColor="#fff" :disabled="true"
								suffixIcon="arrow-down" v-model="form.education"></u--input>
						</u-form-item>
					</view>
				</view>
				<u-line color="#ccc" length="90%"></u-line>
				<view class="content-row">
					<view class="content-row-left">
						教龄
					</view>
					<view class="content-row-right">
						<u-form-item prop="LengthOfTeaching">
							<u--input placeholder="请输入高校" border="none" v-model="form.LengthOfTeaching"></u--input>
						</u-form-item>
					</view>

				</view>
				<u-line color="#ccc" length="90%"></u-line>
				<view class="content-row">
					<view class="content-row-left">
						籍贯
					</view>
					<!-- 				<view class="content-row-right" @click="blocKpicker(3)">
						<u-form-item prop="nativePlace">
							<u--input placeholder="请选择省市显" border="none" disabledColor="#fff" :disabled="true"
								v-model="form.nativePlace"></u--input>
						</u-form-item>
					</view> -->
					<view class="content-row-right">

						<picker mode="region" @change="yearChange">
							<!-- <view>{{ this.form.nativePlace }} </view> -->
							<u-form-item prop="nativePlace">
								<u--input placeholder="请选择省市县" border="none" disabledColor="#fff" :disabled="true"
									suffixIcon="arrow-down" v-model="form.nativePlace"></u--input>
							</u-form-item>
							<!-- 		<u-form-item prop="briefIntroduction">
								<u--input placeholder="请输入个人简介" border="none" v-model="form.briefIntroduction"></u--input>
							</u-form-item> -->
						</picker>

					</view>

				</view>
				<u-line color="#ccc" length="90%"></u-line>
				<view class="content-row">
					<view class="content-row-left">
						个人简介
					</view>
					<view class="content-row-right">
						<u-form-item prop="briefIntroduction">
							<u--input placeholder="请输入个人简介" border="none" v-model="form.briefIntroduction"></u--input>
						</u-form-item>
					</view>

				</view>

			</u-form>
		</view>
		<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="show=false "
			@change="changeHandler"></u-picker>
		<u-picker :show="areaShow" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="areaShow=false "
			@change="changeHandler"></u-picker>
		<u-datetime-picker :show="showTime" v-model="timeValue" :showToolbar="false" mode="date"
			@cancel="showTime=false" @confirm="confirmTime"></u-datetime-picker>
		<view class="floor-box">
			<button @click="addTargets" class="floor-text">提交申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 日历选择器
				showTime: false,
				// 日期
				timeValue: Number(new Date()),
				// 选择器
				show: false,
				// 籍贯
				areaShow: false,
				// 选择器切换
				showMany: null,
				// 选择器内容
				columns: [],
				// 提交内容
				form: {
					name: '',
					// 性别
					gender: '',
					// 类型
					type: '',
					// 手机号
					mobile: '',
					// 日期
					time: '',
					// 高校
					collegesAndUniversities: '',
					// 专业
					speciality: '',
					// 学历
					education: '',
					// 教龄
					LengthOfTeaching: '',
					// 籍贯
					nativePlace: '',
					// 个人简介
					briefIntroduction: ''
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					gender: {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					type: {
						type: 'string',
						required: true,
						message: '请选择类型',
						trigger: ['blur', 'change']
					},
					mobile: {
						validator: (rule, value, callback) => {
							// 返回true表示校验通过，返回false表示不通过
							// 校验手机号 this.$u.test.mobile(value)
							// 校验电话 this.$u.test.landline(value)
							return this.$u.test.mobile(value) || this.$u.test.landline(value);
						},
						min: 11,
						max: 11,
						required: true,
						message: '请输入xxx-xxxx或者手机号',
						// 触发器可以同时用blur和change
						trigger: ['change'],


					},
					time: {
						type: 'string',

						required: true,
						message: '请选择日期',
						trigger: ['blur', 'change']
					},
					collegesAndUniversities: {
						type: 'string',
						required: true,
						message: '请输入高校',
						trigger: ['blur', 'change']
					},
					speciality: {
						type: 'string',
						required: true,
						message: '请输入专业',
						trigger: ['blur', 'change']
					},
					education: {
						type: 'string',

						required: true,
						message: '请选择学历',
						trigger: ['blur', 'change']
					},
					LengthOfTeaching: {
						type: 'string',
						required: true,
						message: '请输入教龄',
						trigger: ['blur', 'change']
					},
					nativePlace: {
						type: 'string',
						required: true,
						message: '请选择籍贯',
						trigger: ['blur', 'change']
					},
					briefIntroduction: {
						type: 'string',
						required: true,
						message: '请选择个人简介',
						trigger: ['blur', 'change']
					}
				},
				columnData: [],

			};
		},
		methods: {
			// 打开选择器
			blocKpicker(e) {
				console.log(e);
				this.showMany = e
				if (this.showMany === 0) {
					this.columns = [
						['男', '女', ]
					]
				} else if (this.showMany === 1) {
					// <text v-if="item.educType==0" class="item-state-txt">在校大学生</text>
					// <text v-if="item.educType==1" class="item-state-txt">在校研究生</text>
					// <text v-if="item.educType==2" class="item-state-txt">专业教师</text>
					// <text v-if="item.educType==3" class="item-state-txt">其他</text>
					this.columns = [
						['在校大学生', '在校研究生', '专业教师', '其他']
					]
				} else if (this.showMany === 2) {
					this.columns = [
						['小学', '博真', ]
					]
				}
				this.show = true
			},
			// 选择器确认
			confirm(index) {
				console.log(index);
				this.show = false
				if (this.showMany === 0) {
					this.form.gender = index.value[0]
				} else if (this.showMany === 1) {
					this.form.type = index.value[0]
				} else if (this.showMany === 2) {
					this.form.education = index.value[0]
				}
			},
			// 选择日期
			confirmTime(e) {
				this.showTime = false
				let date = new Date(e.value);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				// return year + '-' + month + '-' + day;
				this.form.time = year + '年' + month + '月' + day + '日'
			},
			// 点击申请
			addTargets() {

				this.$refs.form.validate(valid => {
					// 为true，才能执行下一步操作，为false，就会显示rules里的message
					if (valid) {
						console.log(valid);
					}
				});
			},
			// 籍贯选择
			yearChange(e) {

				this.form.nativePlace = e.detail.value.join(' ');
				console.log(this.form.nativePlace);
			}


		},


	}
</script>

<style lang="scss">
	.Check-in-platform {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
	}

	.title {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		font-size: 30rpx;
		color: #EC808D;
	}

	.content {
		min-width: 100vw;
	}

	.content-row {
		width: 90vw;
		height: 111rpx;
		display: flex;
		// align-items: center;
	}

	.content-row-left {
		padding-left: 40rpx;
		width: 300rpx;
		display: flex;
		font-size: 25rpx;
		align-items: center;
		height: 120rpx;
	}

	.content-row-right {
		width: 100%;
		padding-top: 20rpx;
	}

	.floor-box {
		width: 100%;

		box-sizing: border-box;
		padding: 0 50rpx;
		position: fixed;
		bottom: 50rpx;
	}

	.floor-text {
		background-color: #04bc16;
		color: #fff;
	}
</style>